﻿<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        color: #222;
        font: 14px Arial;
      }
      
      body a {
        color: #3D5C9D;
        text-decoration: none;
      }
    </style>
    <script>
        var html5rocks = {};
        html5rocks.webdb = {};
        html5rocks.webdb.db = null;

        html5rocks.webdb.open = function () {
            var dbSize = 5 * 1024 * 1024; // 5MB
            html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
        }

        html5rocks.webdb.createTable = function () {
            var db = html5rocks.webdb.db;
            db.transaction(function (tx) {
                tx.executeSql("CREATE TABLE IF NOT EXISTS todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
            });
        }

        html5rocks.webdb.addTodo = function (todoText) {
            var db = html5rocks.webdb.db;
            db.transaction(function (tx) {
                var addedOn = new Date();
                tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
              [todoText, addedOn],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
            });
        }

        html5rocks.webdb.onError = function (tx, e) {
            alert("There has been an error: " + e.message);
        }

        html5rocks.webdb.onSuccess = function (tx, r) {
            // re-render the data.
            html5rocks.webdb.getAllTodoItems(loadTodoItems);
        }


        html5rocks.webdb.getAllTodoItems = function (renderFunc) {
            var db = html5rocks.webdb.db;
            db.transaction(function (tx) {
                tx.executeSql("SELECT * FROM todo", [], renderFunc,
              html5rocks.webdb.onError);
            });
        }

        html5rocks.webdb.deleteTodo = function (id) {
            var db = html5rocks.webdb.db;
            db.transaction(function (tx) {
                tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
            });
        }

        function loadTodoItems(tx, rs) {
            var rowOutput = "";
            var todoItems = document.getElementById("todoItems");
            for (var i = 0; i < rs.rows.length; i++) {
                rowOutput += renderTodo(rs.rows.item(i));
            }

            todoItems.innerHTML = rowOutput;
        }

        function renderTodo(row) {
            return "<li>" + row.todo + " [<a href='javascript:void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID + ");'>Delete</a>]</li>";
        }

        function init() {
            html5rocks.webdb.open();
            html5rocks.webdb.createTable();
            html5rocks.webdb.getAllTodoItems(loadTodoItems);
        }

        function addTodo() {
            var todo = document.getElementById("todo");
            html5rocks.webdb.addTodo(todo.value);
            todo.value = "";
        }
    </script>
  </head>
  <body onload="init();">
    <ul id="todoItems">
    </ul>
    <form type="post" onsubmit="addTodo(); return false;">
      <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;" />
      <input type="submit" value="Add Todo Item"/>
    </form>
  </body>
</html>​